<template>
  <div>
    <el-breadcrumb separator-class='el-icon-arrow-right'>
      <el-breadcrumb-item v-bind:to='{ path: "/" }'>首页</el-breadcrumb-item>
      <el-breadcrumb-item>桩站管理</el-breadcrumb-item>
      <el-breadcrumb-item>建桩申请</el-breadcrumb-item>
    </el-breadcrumb>
    <div class='dict-main'>
      <el-tabs v-model='activeName' class='title-top'>
        <el-tab-pane label='建桩申请' name='first'>
          <div class='main-module charger'>
            <el-row class='posre'>
              <el-col :span='12' class='text-right search-top'>
                <el-button size='small'  icon='el-icon-arrow-up' @click='show = !show' plain v-if='show==true'>搜索
                </el-button>
                <el-button size='small' type="primary" icon='el-icon-arrow-down' @click='show = !show' plain v-else >搜索</el-button>

              </el-col>
            </el-row>
            <el-collapse-transition>
              <div v-show='show'>
                <el-row :gutter='20' class='bill-search'>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='bill-search-title fl'>申请人名称</label>
                    <el-input placeholder="可按用客户称进行查询" v-model='params.customName'></el-input>
                  </el-col>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='bill-search-title fl'>联系电话</label>
                    <el-input placeholder="可按客户手机进行查询" v-model='params.mobile'></el-input>
                  </el-col>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='bill-search-title fl'>安装地点</label>
                    <el-select  v-model='params.provinceCode'  placeholder='请选择申请地' style='width: 100%'>
                      <el-option
                        v-for='item in provinces'
                        :key='item.code'
                        :label='item.name'
                        :value='item.code'>
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='demonstration bill-search-title fl'>申请日期</label>
                    <div class='block'>
                      <el-date-picker
                        v-model='startDates'
                        value-format='yyyy-MM-dd'
                        type='daterange'
                        align='right'
                        unlink-panels
                        range-separator='至'
                        start-placeholder='开始日期'
                        end-placeholder='结束日期'
                        :picker-options='pickerOptions'>
                      </el-date-picker>
                    </div>
                  </el-col>
                  <el-col :span='14' class='bill-search-row text-right'>
                    <el-button type='warning' size='small' icon='el-icon-search' @click='clearParams()'>清空</el-button>
                    <el-button type='primary' size='small' icon='el-icon-search' @click='searchChargerBuildApplyData()'>检索</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-transition>
            <!--表格-->
            <template>
              <el-table ref="applyTable" :data='chargerBuildApplyDatas' stripe tooltip-effect='dark' style='width: 100%'
                        @sort-change="createTimeSort" @filter-change="statusFilterHandler">
                <el-table-column label='申请时间' prop='createTime' align='center' min-width="150"
                                 sortable="custom"></el-table-column>
                <el-table-column label='联系人' prop='customName' min-width="120" align='center'></el-table-column>
                <el-table-column label='联系电话' prop="mobile" min-width="130" align='center'>
                </el-table-column>
                <el-table-column label='建桩地点' prop="provinceName" min-width="130" align='center'>
                  <template slot-scope="scope">
                   {{scope.row.provinceName}}{{scope.row.cityName}}
                  </template>
                </el-table-column>
                <el-table-column label='有无车位' prop='hasParkPlace'  min-width="150" show-overflow-tooltip align='center' >
                  <template slot-scope="scope">
                    <span v-if="scope.row.hasParkPlace==1" style="color: #1784ff">有车位</span>
                    <span v-if="scope.row.hasParkPlace==0" style="color: red">无车位</span>
                  </template>
                </el-table-column>
                <el-table-column label='状态' prop='status' columnKey="status" min-width="150" show-overflow-tooltip
                                 align='center' :filters="statusFilter" :filter-multiple=false>
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==1" style="color: #f56c6c;">未联系</span>
                    <span v-if="scope.row.status==2" style="color: red;">待更进</span>
                    <span v-if="scope.row.status==3" style="color: blue;">已完成</span>
                  </template>
                </el-table-column>
                <el-table-column label='预约时间' prop='appointDate' min-width="150" show-overflow-tooltip
                                 align='center'></el-table-column>
                <el-table-column label="操作" fixed="right" width="240" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" type="success" plain @click="openApplyDetailWin(scope.row)">详情</el-button>
                    <el-button size="mini" type="primary" plain @click="openHandleWin(scope.row)">处理</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!--分页-->
            <div class='block text-center'>
              <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
                             :current-page='pageable.currentPage' :page-sizes='[20, 40, 80, 100]'
                             :page-size='pageable.pageSize' layout='total, sizes, prev, pager, next, jumper'
                             :total='pageable.total'></el-pagination>
            </div>
          </div>
        </el-tab-pane>


        <el-dialog title='申请详情' :visible.sync='dialogViewVisible' :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form  label-width='180px' label-suffix=":" inline="true">
          <el-form-item label='申请人姓名'  :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.customName}}</div>
          </el-form-item>
          <el-form-item label='联系电话' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.mobile}}</div>
          </el-form-item>
          <el-form-item label='有无车位'  :span="12">
            <div style="width: 160px;" v-if="chargerBuildApplyDetail.hasParkPlace==1">有车位</div>
            <div style="width: 160px;color: red;" v-else>无车位</div>
          </el-form-item>
          <el-form-item label='申请时间' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.createTime}}</div>
          </el-form-item>
          <el-form-item label='安装地址' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.provinceName}}{{chargerBuildApplyDetail.cityName}}</div>
          </el-form-item>
          <el-form-item label='详细地址' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.address}}</div>
          </el-form-item>
          <el-form-item label='预约时间' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.appointDate}}</div>
          </el-form-item>
          <el-form-item label='业务状态':span="24">
            <span v-if="chargerBuildApplyDetail.status==1" style="width: 160px; color: #f56c6c;">未联系</span>
            <span v-if="chargerBuildApplyDetail.status==2" style="width: 160px; color: red;">待更进</span>
            <span v-if="chargerBuildApplyDetail.status==3" style="width: 160px; color: blue;">已完成</span>
          </el-form-item>
          <el-form-item label='处理说明' :span="12">
            <div style="width: 160px;">{{chargerBuildApplyDetail.remark}}</div>
          </el-form-item>
        </el-form>
        <div slot='footer' class='dialog-footer'>
          <el-button size='medium' type='primary' @click='dialogViewVisible = false'>关闭</el-button>
        </div>
        </el-dialog>

        <el-dialog title='处理申请' :visible.sync='dialogHandleVisible' :close-on-click-modal='false'
                   :close-on-press-escape='false'>
          <el-form :model='handleParam' ref='handleForm'  label-width='180px' :rules='rules'>
            <el-form-item label='处理结果' label-width='120px' prop='status'>
              <el-select  v-model='handleParam.status' placeholder='请选择处理结果' style='width: 85%'>
                <el-option
                  v-for='item in statusFilter'
                  :key='item.value'
                  :label='item.text'
                  :value='item.value'>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label='处理说明' label-width='120px' prop='remark'>
              <el-input style='width: 85%;' type='textarea' v-model='handleParam.remark' placeholder='请输入处理结果备注说明'></el-input>
            </el-form-item>
          </el-form>
          <div slot='footer' class='dialog-footer'>
            <el-button size='medium' @click='dialogHandleVisible = false'>取 消</el-button>
            <el-button size='medium' type='success' icon="el-icon-check"  @click='handleApply("handleForm")'>处理
            </el-button>
          </div>
        </el-dialog>

      </el-tabs>
    </div>
  </div>
</template>
<script>
  import {
    loadChargerBuildApplyDatas,
    handleApply
  } from '@/api/charger-buid';
  import {
    getAllProvince
  } from '@/api/province';

  export default {
    data() {
      return {
        show: false,
        provinces: [],
        pageable: {
          currentPage: 1,
          pageSize: 20
        },
        activeName: 'first',
        chargerBuildApplyDatas: [], //列表数据
        startDates: '',
        statusFilter: [
          {
            text: '未联系', value: '1'
          },
          {
            text: '待跟进', value: '2'
          },
          {
            text: '已完成', value: '3'
          }],
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        params: {
          page: 1,
          size: 20,
          customName: '',
          mobile: '',
          provinceCode: '',
          status: '',
          startDate: '',
          endDate: '',
          createTimeSort: ''
        },
        dialogViewVisible: false,
        dialogHandleVisible: false,
        chargerBuildApplyDetail: {},
         handleParam: {
            id: '',
            status: 1,
           remark: ''
         },
        rules: {
          status: [
            {required: true, message: '请选择处理状态', trigger: 'blur'}
          ],
          remark: [
            {required: true, message: '请填写处理说明', trigger: 'blur'},
            {min: 3, max: 200, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ]
        }
      };
    },
    filters: {},
    methods: {
      //获取数据
      loadChargerBuildApplyDatas() {
        this.params.page = this.pageable.currentPage;
        this.params.size = this.pageable.pageSize;
        if (this.startDates != null) {
          this.params.startDate = this.startDates[0];
          this.params.endDate = this.startDates[1];
        }
        loadChargerBuildApplyDatas(this.params).then(response => {
          if (response.code !== 0) {
            this.$message({
              message: response.message,
              type: 'error'
            });
          } else {
            this.chargerBuildApplyDatas = response.data.data;
            this.pageable = {
              currentPage: response.data.pageInfo.page,
              pageSize: response.data.pageInfo.pageSize,
              total: response.data.pageInfo.total
            };
          }
        });
      },
      openApplyDetailWin(rowInfo){
        this.chargerBuildApplyDetail=rowInfo;
        this.dialogViewVisible=true;
      },
      openHandleWin(rowInfo){
        this.handleParam.id=rowInfo.id;
        this.handleParam.status=rowInfo.status;
        this.handleParam.remark=rowInfo.remark;
        this.dialogHandleVisible=true;
      },
      //搜索
      searchChargerBuildApplyData() {
        this.loadChargerBuildApplyDatas();
      },
      clearParams() {
        this.params = {};
        this.startDates = [];
      },
      //申请时间排序
      createTimeSort(params) {
        if (params.prop == 'createTime') {
          if (params.order == 'ascending') {
            this.params.createTimeSort = 1;
          } else if (params.order == 'descending') {
            this.params.createTimeSort = 2;
          }
        }
        this.loadChargerBuildApplyDatas();
      },
      //状态筛选
      statusFilterHandler(filter) {
        if (this.params.status == filter.status[0]) {
          return false;
        }
        this.params.status = filter.status[0];
        this.loadChargerBuildApplyDatas();
      },
      handleApply(){
        var that = this;
        this.$refs.handleForm.validate((valid) => {
          if (valid) {
            handleApply(that.handleParam).then(response => {
              if (response.code == 0) {
                this.$message({
                  message: '处理成功',
                  type: 'success'
                });
                that.loadChargerBuildApplyDatas();
                that.dialogHandleVisible=false;
              } else {
                that.$message({
                  message: response.message,
                  type: 'error'
                });
              }
            });
          } else {
            return false;
          }
        })
      },
      //分页
      handleSizeChange(val) {
        this.pageable.pageSize = val;
        this.loadChargerBuildApplyDatas();
      },
      handleCurrentChange(val) {
        this.pageable.currentPage = val;
        this.loadChargerBuildApplyDatas();
      }
    },
    watch: {},
    created: function () {
      this.loadChargerBuildApplyDatas();
      getAllProvince().then(response => {
        this.provinces = response.data;
      });
    }
  };
</script>


